<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="../css/service.css">
  <title>服务</title>
</head>

<body class="service page-group">
  <div class="page">
    <!-- //<header class="bar bar-nav" id="golbalHeader"></header> -->

    <!-- 这里是页面内容区 -->
    <div class="content">
      <!-- <div class="searchbar row" style="width:90%;margin:0 auto;">
        <div class="search-input col-85">
          <input type="search" id='search' placeholder='输入关键字...' />
        </div>
        <a class="button button-fill button-primary col-15">
          <span class="icon icon-search"></span>
        </a>
      </div>
      <div class="buttons-tab">
        <a href="#tab1" class="tab-link active button">综合</a>
        <a href="#tab2" class="tab-link button">销量</a>
        <a href="#tab3" class="tab-link button">价格</a>
      </div> -->
      <div class="content-block native-scroll">
        <div class="card-content">
          <div class="list-block media-list">
            <ul>

            </ul>
            <p class="moreInfo" onclick="service.loadMore()"></p>
          </div>
        </div>
      </div>
      <!-- 底部 -->

    </div>
    <nav class="bar bar-tab" id="golbalFooter"></nav>
    <div id="modal" style="display:none">
      <li class="item-content">
        <div class="item-media">
          <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
            width="44">
        </div>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title" style="width:100%;">&nbsp;</div>
          </div>
          <div class="item-subtitle relative">
            <span>￥</span>
            <a href="#" class="button button-big button-fill button-success payButton" onclick="service.goOrder(this)">预约</a>
          </div>
        </div>
      </li>
    </div>
  </div>

</body>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript">
  var service = (function ($) {
    $.init()
    var service = new ST({
      golbalHeaderText: '服务列表',
      golbalHeaderFunc: function () {
        if(document.referrer.match('index')) {
          return
        }else{
          history.back()
        }
      },
      golbalFooterIndex: 1,
      getServiceParams: {
        page: 1,
        pageSize: 4
      },
      load: false
    })
    service.pushAjax({
      getService: {
        url: '/app/api/public/service/getSecondLevelServiceList',
        data: service.getServiceParams
      }
    })
    sessionStorage.removeItem('isLogin')
    sessionStorage.setItem('isLogin','service')
    service.pushAjaxSuccess({
      getService: function (res) {
        if (res.code === '1') {
          if (res.data.serviceList.length < 4) {
            $('.moreInfo').text('没有更多数据')
            service.load = false
          } else {
            $('.moreInfo').text('点击加载更多')
            service.load = true
          }
          res.data.serviceList.forEach(function (e) {
            var li = $('#modal').find('li').clone()
            $(li).find('img').attr('src', e.image)
            $(li).find('.item-title').text(e.name)
            $(li).find('.item-subtitle span').text("￥" + e.price.split(',')[0])
            $(li).appendTo($('.list-block ul'))
            $(li).find('.item-subtitle a').attr('service-id', e.serviceId)
            $(li).find('.item-subtitle a').attr('service-name', e.name)
            $(li).find('.item-subtitle a').attr('price', e.price)
            $(li).find('.item-subtitle a').attr('market-price', e.marketPrice)
            $(li).find('.item-subtitle a').attr('total-time', e.totalTime)
          })
        }
      }
    })
    service.http('getService')
    service.loadMore = function () {
      if (service.load) {
        service.getServiceParams.page++
          service.http('getService')
      }
    }
    service.goOrder = function (row) {
      window.location.href = './appointment.html?serviceId=' + $(row).attr('service-id') + "&name=" + $(
        row).attr('service-name') + "&price=" + $(row).attr('price') + "&marketPrice=" + $(row).attr(
        'market-price')+"&totalTime=" + $(row).attr('total-time')
    }
    service.render()
    return service
  })($)
</script>

</html>